<template>
  <div class="tab-actions">
    <el-button
      v-if="!isCurrentUser"
      class="like-btn"
      type="primary"
      size="small"
      plain
      :class="{ 'is-liked': item.liked }"
      @click.stop="onLike">
      <el-icon><Promotion /></el-icon> 赞同 {{ item.likeCount || 0 }}
    </el-button>

    <!-- 只有当前用户的回答才显示编辑和删除按钮 -->
    <template v-if="isCurrentUser">
      <el-button class="edit-btn" type="warning" size="small" plain @click.stop="onEdit">
        <el-icon><Edit /></el-icon> 编辑
      </el-button>
      <el-button class="delete-btn" type="danger" size="small" plain @click.stop="onDelete">
        <el-icon><Delete /></el-icon> 删除
      </el-button>
    </template>

    <!-- 问题作者才能看到采纳按钮 -->
    <template v-if="isQuestionAuthor && !item.isBest && questionStatus == 0">
      <el-button class="adopt-btn" type="success" size="small" plain @click.stop="onAdopt">
        <el-icon><Check /></el-icon> 采纳
      </el-button>
    </template>

    <!-- 最佳答案标识 -->
    <el-tag v-if="item.isBest" type="success" effect="dark" class="best-answer-tag">
      <el-icon><Trophy /></el-icon> 最佳答案
    </el-tag>
    
    <el-dropdown trigger="click" v-if="!isCurrentUser">
      <span class="action-btn">
        <el-icon><MoreFilled /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="showReportDialog = true">举报</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span class="ml-auto">{{formatTime(item.adoptTime) ||  formatTime(item.createTime)}}</span>
  </div>

  <!-- 使用举报组件 -->
  <ReportDialog v-model="showReportDialog" :report-info="reportInfo" @success="handleReportSuccess" />

  <!-- 删除确认对话框 -->
  <el-dialog v-model="showDeleteConfirm" title="删除确认" width="400px" :close-on-click-modal="false" append-to-body>
    <span>确定要删除这条回答吗？删除后将无法恢复。</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDeleteConfirm = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定删除</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ChatDotRound, Star, Share, MoreFilled, Promotion, Edit, Delete, Check, Trophy } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ReportDialog from './commonUI/ReportDialog.vue'
import { getUserInfo } from '@/utils/webStorage'
import { deleteAnswer, postBestAnswer, postLlike } from '@/axios/api/question'
import { formatTime } from '@/utils/transIUtils'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  type: String,
  isCommentExpanded: Boolean,
  questionAuthorId: {
    type: [String, Number],
    default: '',
  },
  questionId: {
    type: [String, Number],
    required: true,
  },
  questionStatus: {
    type: [String, Number],
    default: 0,
  },
})
// console.log(props.item);

const emit = defineEmits(['like', 'comment', 'share', 'favorite', 'love', 'edit', 'refresh', 'refreshQuestionDetail'])

// 判断是否是当前用户的回答
const isCurrentUser = computed(() => {
  const userInfo = getUserInfo()
  return userInfo.uid === props.item.uid
})

// 判断是否是问题作者
const isQuestionAuthor = computed(() => {
  const userInfo = getUserInfo()
  return userInfo.uid === props.questionAuthorId
})

// 举报相关
const showReportDialog = ref(false)
const reportInfo = computed(() => ({
  type: props.type,
  id: props.item.id,
  title: props.item.title,
  content: props.item.content,
}))

// 删除确认相关
const showDeleteConfirm = ref(false)

function handleReportSuccess(data) {
  console.log('举报成功:', data)
}

// 赞同功能
async function onLike() {
  try {
    await postLlike({
      answerId: props.item.id,
    })
    // 通知父组件刷新列表
    emit('refresh')
  } catch (error) {
    ElMessage.error('操作失败：' + error)
  }
}

function onEdit() {
  emit('edit', props.item)
}

async function onDelete() {
  showDeleteConfirm.value = true
}

async function confirmDelete() {
  try {
    await deleteAnswer(props.item.id)
    ElMessage.success('删除成功')
    showDeleteConfirm.value = false
    // 通知父组件刷新列表和问题详情
    emit('refresh')
    emit('refreshQuestionDetail')
  } catch (error) {
    ElMessage.error('删除失败：' + error)
  }
}

// 采纳回答
async function onAdopt() {
  try {
    await postBestAnswer({
      questionId: props.questionId,
      answerId: props.item.id,
    })
    ElMessage.success('采纳成功')
    emit('refresh')
  } catch (error) {
    ElMessage.error('采纳失败：' + error)
  }
}

</script>

<style scoped>
.tab-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  min-height: 32px;
  font-size: 15px;
  color: #4b5563;
  background: none;
}

/* 编辑按钮样式 */
.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
}

.edit-btn:hover {
  background: #e6a23c;
  color: #fff;
  border-color: #e6a23c;
}

/* 删除按钮样式 */
.delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
}

.delete-btn:hover {
  background: #f56c6c;
  color: #fff;
  border-color: #f56c6c;
}

.tab-actions .like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: #e8f3ff;
  color: #1765ad;
  border: 1px solid #a3c8fa;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.18s, color 0.18s, border 0.18s;
  box-shadow: none;
}
.tab-actions .like-btn.is-liked,
.tab-actions .like-btn:hover {
  background: #1765ad;
  color: #fff;
  border-color: #1765ad;
}
.tab-actions .action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px;
  border-radius: 16px;
  background: none;
  color: #4b5563;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  border: none;
  box-shadow: none;
}
.tab-actions .action-btn:hover {
  background: #f0f6ff;
  color: #1765ad;
}
.tab-actions .el-icon {
  font-size: 18px;
  vertical-align: middle;
}
.tab-actions .ml-auto {
  margin-left: auto;
  color: #bdbdbd;
  font-size: 12px;
  align-self: center;
}
.tab-actions .action-btn .action-text {
  white-space: nowrap;
}
.action-btn.is-active {
  color: #1765ad;
  font-weight: bold;
}
:deep(.share-dropdown-menu) {
  width: 120px !important;
  min-width: 0 !important;
  border-radius: 0.7rem !important;
  box-shadow: 0 2px 8px 0 rgba(56, 112, 255, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
  padding: 0 !important;
  border: none !important;
}
:deep(.share-dropdown-menu .el-dropdown-menu) {
  width: 120px !important;
  min-width: 0 !important;
  border-radius: 0.7rem !important;
  padding: 0 !important;
}
:deep(.share-dropdown-menu .el-dropdown-menu__item) {
  text-align: left;
  font-size: 15px;
  color: #64748b;
  padding: 10px 18px;
  transition: background 0.13s, color 0.13s;
  border-radius: 0.5rem;
  margin: 0;
  border-bottom: none;
  letter-spacing: 0.01em;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
:deep(.share-dropdown-menu .el-dropdown-menu__item:hover) {
  background: #f0f6ff;
  color: #1765ad;
}

.report-upload {
  :deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 100px;
    height: 100px;
  }
}

.upload-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-text {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 采纳按钮样式 */
.adopt-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: #f0f9eb;
  color: #67c23a;
  border: 1px solid #c2e7b0;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
}

.adopt-btn:hover {
  background: #67c23a;
  color: #fff;
  border-color: #67c23a;
}

/* 最佳答案标签样式 */
.best-answer-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 15px;
}

/* 最佳答案卡片样式 */
:deep(.is-best-answer) {
  background: #f0f9eb !important;
  border: 1px solid #c2e7b0 !important;
  box-shadow: 0 2px 12px 0 rgba(103, 194, 58, 0.1) !important;
}
</style>
